import React, {memo, useDeferredValue, useState, useTransition} from 'react';
import nameArray from "./nameArray";

/**
 * useTransition:
 * 官方解释：返回一个状态值表示过渡任务的等待状态, 以及一个启动该过渡任务的函数
 * 它其实是在告诉 react 对于某部分任务的更新优先级较低，可以稍后进行更新
 */
const App = memo(() => {

  const [names, setNames] = useState(nameArray);
  //返回一个副本，该副本自带延迟更新效果
  const deferredNames = useDeferredValue(names);

  //问题：当nameArray数据量过大时，用户输入会产生卡顿
  const inputChangeHandle = (event) => {
    const search = event.target.value;
    const filterNames = nameArray.filter(item => item.includes(search))
    setNames(filterNames);
  }

  return (
      <div>
        <input type="text" onInput={e => inputChangeHandle(e)}/>
        <h2>用户列表</h2>
        <ul>
          {
            deferredNames.map((name, index) => (
                <li key={index}>{name}</li>
            ))
          }
        </ul>
      </div>
  );
});

export default App;

/**
 * 省略的hook：
 *
 * useSyncExternalStore：为框架库作者提供的hook（比如next）
 * useInsertionEffect：仅限于 css-in-js库作者使用
 */